<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="../js/mui.min.js"></script>
    <link href="../css/mui.css" rel="stylesheet"/>
    <link href="../css/style.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
    <header class="mui-bar mui-bar-nav">
    	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">北斗智慧派车</h1>
    </header>
    
    <!-- 主页面内容容器 -->
    <div class="mui-content">
 		<div class="user-region">
 			<img class="user-img" src="../images/user.png" />
 			<p class="user-account" id="phone"></p>
 		</div>
 		<div class="user-info">
 			<ul class="mui-table-view">
			    <li class="mui-table-view-cell user-li">
			    	司机
			    	<p class="mui-badge user-p" id="driver"></p>
			    </li>
			    <li class="mui-table-view-cell user-li">
			    	车牌号
			    	<span class="mui-badge user-p" id="carnumber"></span>
			    </li>
			    <li class="mui-table-view-cell user-li" id="task-list">
			    	历史派单
			    	<span class="mui-badge user-p" id="tasks"></span>
			    </li>
			</ul>
 		</div>
 		<div class="logout-div">
 			<button type="button" id="logout-button" class="mui-btn mui-btn-primary mui-btn-outlined">退出登录</button>
 		</div>
	</div>  
	
	<script src="js/mui.min.js"></script>
	<script src="../js/config.js"></script>
	<script src="../js/app.js"></script>
	<script>
		var logoutBtn = document.getElementById("logout-button");
		//监听点击事件
		logoutBtn.addEventListener("tap",function () {
			if (mui.os.ios) {
				app.setState({});
				mui.openWindow({
					url: 'login.html',
					id: 'login',
					show: {
						aniShow: 'pop-in'
					},
					waiting: {
						autoShow: false
					}
				});
				return;
			}
			var btnArray = [{
				title: "切换账号"
			}, {
				title: "关闭应用"
			}];
			plus.nativeUI.actionSheet({
				cancel: "取消",
				buttons: btnArray
			}, function(event) {
				var index = event.index;
				switch (index) {
					case 1:
						//注销账号
						app.setState(null);
						/*
						 * 注意：
						 * 1、因本示例应用启动页就是登录页面，因此注册成功后，直接显示登录页即可；
						 * 2、如果真实案例中，启动页不是登录页，则需修改，使用mui.openWindow打开真实的登录页面
						 */
						plus.webview.getLaunchWebview().show("pop-in");

						break;
					case 2:
						plus.runtime.quit();
						break;
				}
			});
		});
		
		var state = app.getState();
		var phone = state.mobile;
		mui('#phone')[0].innerText = phone;
		
	    //获取车辆信息
	    var vehicleUrl = config.getVehicleUrl();
	    var vehicleData = {
	    	"token": state.token
	    }
	    mui.ajax(vehicleUrl,{
	    	data: vehicleData,
			dataType: 'json',//服务器返回json格式数据
			type: 'get',//HTTP请求类型
			success: function(data){
				console.log(JSON.stringify(data));
				mui('#driver')[0].innerText = data.name;
				mui('#carnumber')[0].innerText = data.license;
			},
			error: function(xhr,type,errorThrown){
				//console.log(xhr.response)
				var response = xhr.response;
				//errorResponse(JSON.parse(response));
				console.log(response)
			}
		});	
		
		
		//获取派单数
	    var taskListUrl = config.getTaskListUrl();
	    var taskData = {
	   		"date": 1,
	   		"limit": 10,
	   		"offset": 0,
	   		"token": state.token
	   	}
	    mui.ajax(taskListUrl,{
	    	data: taskData,
			dataType: 'json',//服务器返回json格式数据
			type: 'get',//HTTP请求类型
			success: function(data){
				console.log(JSON.stringify(data));
				mui('#tasks')[0].innerText = data.total;
			},
			error: function(xhr,type,errorThrown){
				//console.log(xhr.response)
				var response = xhr.response;
				//errorResponse(JSON.parse(response));
				console.log(response)
			}
		});	
		
		mui('#task-list')[0].addEventListener('tap', function(){
			var id = this.getAttribute('id');
			
			mui.openWindow({
			    url:'./tasks.html',
			    id:'tasks.html',
			    styles:{
			      top:'0px', //新页面顶部位置
			      bottom:'0px', //新页面底部位置
			      width:'100%', //新页面宽度，默认为100%
			      height:'100%', //新页面高度，默认为100%
			    },
			    createNew:false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示
			    show:{
			      autoShow:true,//页面loaded事件发生后自动显示，默认为true
			      aniShow:'slide-in-right',//页面显示动画，默认为”slide-in-right“；
			    },
			    waiting:{
			      autoShow:false,//自动显示等待框，默认为true
			      title:'正在加载...'//等待对话框上显示的提示内容
			    }
			})
		})
	</script>
</body>
</html>